"use client";

import { usePathname } from "next/navigation";
import { useMemo } from "react";
import { HiHome } from 'react-icons/hi';
import { BiSearch } from 'react-icons/bi';

import Box from './Box';
import SideBarItem from './SideBarItem';
import Library from "./Library";
import { Song } from "@/types";


interface SideBarProps {
  children: React.ReactNode;
  songs: Song[];
}

const SideBar: React.FC<SideBarProps> = ({ children, songs }) => {
  //动态获取pathname
  const pathname = usePathname();
  //跟踪pathname依赖，组合一个路由规则对象集合
  const routes = useMemo(() => [
    {
      label: '首页',
      //http://localhost:3000/
      active: pathname !== '/search',
      href: '/',
      icon: HiHome 
    },
    {
      label: '搜索',
      //http://localhost:3000/search
      active: pathname === '/search',
      href: '/search',
      icon: BiSearch
    }
  ], [pathname]); 

  return (
    <div className="flex h-full">
      {/* 移动端优先显示左侧导航栏 */}
      <div className="hidden md:flex flex-col gap-y-2 bg-black h-full w-[300px] p-2">
        {/* 左上卡片盒子 显示主页或搜索 导航栏 */}
        <Box className="flex flex-col gap-y-4 px-5 py-4">
          {routes.map((item) => (
            <SideBarItem
              key={item.label}
              {...item}
            />
          ))}
        </Box>
        {/* 左侧盒子不包括左上盒子 音乐库 或 歌单收藏区域 */}
        <Box className="overflow-y-auto h-full">
          {/* 侧边栏的音乐库 */}
          <Library songs={songs} />
        </Box>
      </div>
      <main className="h-full flex-1 overflow-y-auto py-2">{children}</main>
    </div>
  )
}

export default SideBar;